<template>
  <el-header style="text-align: right; font-size: 12px">
    <!-- ============头部查询部分============开始 -->
    <div class="form">
      <el-form :inline="true" :model="ruleForm" ref="ruleForm">
        <el-form-item label="角色名称">
          <el-input
            class="input"
            v-model="ruleForm.name"
            type="text"
            size="mini"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select class="input select" v-model="ruleForm.status" size="mini" placeholder="全部">
            <el-option value="有效"></el-option>
            <el-option value="无效"></el-option>
          </el-select>
        </el-form-item>
        <!-- <span>组件值：{{ ruleForm.buildtime}}</span> -->

        <el-form-item class="allbtn">
          <!-- <a><i class="el-icon-search"></i></a> -->
          <el-button
            class="btn"
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="selectForm()"
          >查询</el-button>
          <el-button
            class="btn"
            size="mini"
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="insertRoleList()"
            v-if="$store.state.insertRoleFlag"
          >新增</el-button>
          <el-button
            class="btn"
            size="mini"
            type="primary"
            icon="el-icon-remove-outline"
            v-if="$store.state.deleteRoleFlag"
            @click="deleteList()"
          >删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- ============头部查询部分============结束 -->
  </el-header>
</template>
<script>
import { Message } from "element-ui";
export default {
  props: ["sendPage", "selections"],
  components: {},
  data() {
    return {
      ruleForm: {},
      roleIdList: [],
    };
  },
  methods: {
    insertRoleList() {
      this.$emit("openDialog", true);
    },
    selectForm() {
      this.$emit("roleSelectData", this.ruleForm);
    },
    deleteList() {
      // console.log(this.selections)
      const param = new URLSearchParams();

      for (let i = 0; i < this.selections.length; i++) {
        this.roleIdList.push(this.selections[i].roleId);
      }
      param.append("roleIds", this.roleIdList);
      const vm = this;
      vm.$http.get("/role/deleteRoleList", { params: param }).then((res) => {
        if (res.data > 0) {
          Message({ message: "删除成功", type: "success" });
        } else {
          Message({ message: "删除失败", type: "error" });
        }
        if(res.data==-1){
          this.$message.error("删除失败,此角色已关联用户")
        }
        this.$emit("refreshRoleList");
      });
    },
  },
  mounted() {
    this.$emit("roleSelectData", this.ruleForm);
  },
};
</script>
<style lang='less' scoped>
.select {
  width: 75px;
}
.form {
  float: left;
  margin-top: 10px;
}
.input {
  //   margin-top: 10px;
  width: 91px;
}
.btn {
  margin-top: 16px;
  width: 75px;
}
.el-header {
  /* width: 100%; */
  background-color: #b3c0d1;
  color: #333;
  /* line-height: 60px; */
}
.allbtn {
  margin-top: -10px;
}
</style>